<template>
	<picker class="inline-block" mode="multiSelector" :value="dateTimeIndex" @change="changeDateTime" @columnchange="changeDateTimeColumn"
	 :range="dateTimeArray">
		<view class="tui-picker-detail">
			{{ showDate ? showDate : placeholder }}
		</view>
	</picker>
</template>

<script>
	import dateTimePicker from '../../../utils/date-time-picker.js'
	export default {
		data() {
			return {
				dateTimeArray: null,
				dateTime: null,
				dateTimeIndex: null,
				startYear: 2020,
				endYear: 2050
			}
		},
		computed: {
			showDate() {
				if (this.dateTime) {
					return `${this.dateTime[0]}-${this.dateTime[1]}-${this.dateTime[2]} ${this.dateTime[3]}:${this.dateTime[4]}`
				}
			}
		},
		props: {
			placeholder: {
				type: String,
				value: ''
			},
			defaultSelect: {
				type: Boolean,
				value: true
			}
		},
		mounted() {

			// 获取完整的年月日 时分秒，以及默认显示的数组
			let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear);
			// 精确到分的处理，将数组的秒去掉
			obj.dateTimeArray.pop();
			obj.dateTime.pop();
			obj.dateTimeIndex.pop();

			this.dateTimeArray = obj.dateTimeArray
			this.dateTimeIndex = obj.dateTimeIndex

			if (this.defaultSelect) {
				this.dateTime = obj.dateTime

				this.$emit('pickerChange', this.showDate)
			}

		},
		methods: {
			changeDateTime(e) {
				let dateTimeIndex = e.detail.value
				this.dateTimeIndex = dateTimeIndex

				this.dateTime = this.dateTimeArray.map((item, index) => {
					let v = item[dateTimeIndex[index]]

					return v.substr(0, v.length - 1)
				})

				this.$emit('pickerChange', this.showDate)
			},
			changeDateTimeColumn(e) {
				let {
					column,
					value
				} = e.detail,
					dateTime = this.dateTime,
					timeIndex = this.dateTimeIndex,
					timeArray = this.dateTimeArray,
					year = timeArray[0][timeIndex[0]],
					month = timeArray[1][timeIndex[1]]

				timeIndex[column] = value;
				timeArray[2] = dateTimePicker.getMonthDay(year.substr(0, year.length - 1), month.substr(0, month.length - 1));

				this.$set(this.dateTimeArray, timeArray)

				this.dateTimeIndex = timeIndex
				this.dateTime = dateTime
			}
		}
	}
</script>

<style lang="less">

</style>
